<template>
  <div class="third-help">
    <img class="thired-background"
         src="http://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24help-background8.jpg"
         alt="">
    <img class="thired-button"
         @click="actionHelp"
         :src="clickHelp"
         alt="">
    <img class="thired-lucky-draw"
         @click="actionLuckyDraw"
         :src="luckyDraw"
         alt="">
    <div class="prompt-txt">
      <img class="prompt-instructions" :src="promptInstructions" alt="">
      <img class="prompt-background" :src="helpPrompt" alt="">
      <div class="txt">
        <p v-for="item in helpIllustrateList">
          {{item.title}}
        </p>
      </div>
    </div>
    <div class="instruction">
      <div></div>
      <marquee scrollamount="4">
        <span>{{footTitle}}</span>
      </marquee>
    </div>
    <div class="prompt-box" v-if="showPrompt">
      <div class="back"></div>
      <div class="backdrop">
        <img class="backdrop-img" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/recordImg.png" alt="">
        <p class="prompting">提示</p>
        <p class="prizes">{{helpMessage}}</p>
        <img class="alert-button"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
             @click="actionPromptDetermine"
        >
      </div>
    </div>
    <div class="progress-box">
      <img class="progress-bar-end"
           :src="progressBar" alt="">
      <img class="progress-bar-left" v-if="progressList.barLeft"
           :src="progressBarLeft" alt="">
      <img class="progress-bar-center" v-if="progressList.barCenter"
           :src="progressBarCenter" alt="">
      <img class="progress-bar-right" v-if="progressList.barRight"
           :src="progressBarRight" alt="">
    </div>
  </div>
</template>
<script>
//  import NetworkActivity from '@/network/NetworkActivity'
//  import ReturnManager from '@util/ReturnManager'
  export default {
    data() {
      return {
        helpType:'helpListV17',
        showPrompt: false,
        progressList:{
          barLeft:0,
          barCenter:0,
          barRight:0
        },
        helpMessage:'',
        helpActive:false,
        helpList:[],
        footTitle:'帮好友助力赢《24小时：末路重生》10元观影券',
        helpPrompt:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/help-prompt1.png',
        promptInstructions:'https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24prompt-instructions1.png',
        luckyDraw:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/lucky-draw1.png',
        alreadyHelp:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/already-help.png',
        completeHelp:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/complete-help.png',
        progressBar:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/progress-bar.png',
        progressBarLeft:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/progress-bar-left1.png',
        progressBarCenter:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/progress-bar-center1.png',
        progressBarRight:'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/progress-bar-right1.png'
      }
    },
    computed: {
      helpIllustrateList(){
        return [
          {title:'1.VR场景共藏有3个道具，每位用户最多可开启3个道具；'},
          {title:'2.开启道具有机会可获得《24小时：末路重生》10元观影券 1~3张（最多可获得一次）或幸运豆奖励'},
          {title:'3.参与用户可分享朋友圈邀请好友助力，获得好友助力将会在VR场景中标识出道具位置；'},
          {title:'4.最多获得3个不同好友的助力。'}
        ]
      },
      userId: function () {
        return this.$route.query.userId;
      },
      robId: function () {
        return this.$route.query.robId;
      },
      robType: function () {
        return this.$route.query.robType;
      },
      inType: function () {
        return this.$route.query.inType;
      },
      clickHelp:function(){
        if (this.progressList.barLeft && this.progressList.barCenter && this.progressList.barRight){
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/complete-help1.png'
        } else if (this.helpActive){
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/already-help1.png'
        } else {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/click-help1.png'
        }
      }
    },
    methods:{
      actionHelp() {
        for (let i = 0; i < this.helpList.length; i++){
          if (this.helpList[i] === this.userId){
            this.helpActive = true;
            break;
          }
        }
        setTimeout(() => {
          if (this.progressList.barLeft && this.progressList.barCenter && this.progressList.barRight){
            this.showPrompt = true;
            this.helpMessage = '助力完成';
          } else {
            if (this.helpActive){
              this.showPrompt = true;
              this.helpMessage = '您已经助力过啦';
            } else {
              this.setUpvote();
            }
          }
        }, 200)
      },
      actionLuckyDraw() {
//        ReturnManager.universalLinksToApp();
      },
      actionPromptDetermine() {
        this.showPrompt = false;
      },
      setUpvote: function () {
//        this.showLoading();
//        NetworkActivity.upvote(this.userId, this.robId, this.robType).then((ret) => {
//          this.closeLoading();
//          this.helpActive = true;
//          this.showPrompt = true;
//          this.helpMessage = '助力成功';
//          this.helpList.push(this.userId);
//          window.localStorage.setItem(this.helpType, this.helpList);
//          this.actionStatus();
//          console.log(ret);
//        }, error => {
//          this.closeLoading();
//          this.showPrompt = true;
//          this.helpMessage = error.message;
//        })
      },
      actionStatus: function () {
//        this.showLoading();
//        NetworkActivity.upvoteTime(this.userId, this.robId, this.robType).then((data) => {
//          this.closeLoading();
//          if (data > 0){
//            this.progressList.barLeft = true;
//          }
//          if (data > 1){
//            this.progressList.barCenter = true;
//          }
//          if (data > 2){
//            this.progressList.barRight = true;
//          }
//          this.closeLoading();
//        }, error => {
//          this.closeLoading();
//          console.log(error)
//        })
      },
      randomMethods(n, m) {
        return Math.random() * (m - n) + n
      }
    },
    mounted:function(){
      this.actionStatus();
      if (window.localStorage.getItem(this.helpType)){
        this.helpList = window.localStorage.getItem(this.helpType).split(',');
        for (let i = 0; i < this.helpList.length; i++){
          if (this.helpList[i] === this.userId){
            this.helpActive = true;
          } else {
            this.helpActive = false;
          }
        }
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .third-help{
    width:100%;
    height:100%;
    position: absolute;
    top:0;left:0;
    .prompt-txt{
      width:6.5rem;
      height:4.5rem;
      position: absolute;
      top:0.3rem;left:0;right:0;bottom:0;
      margin:auto;
      .prompt-background{
        width:100%;
        height:100%;
        position: absolute;
        top:0;left:0;
        z-index:1;
      }
      .prompt-instructions{
        width:2.9rem;
        position: absolute;
        top:-3.2rem;left:0;right:0;bottom:0;
        margin:auto;
        z-index:2;
      }
      .txt{
        width:6rem;
        position: absolute;
        top:1rem;left:0;right:0;bottom:0;
        margin:auto;
        text-align: left;
        z-index:2;
        p{
          font-size:0.26rem;
          color:#fdfdfd;
          padding-top:0.1rem;
        }
      }
    }
    .thired-background{
      width:100%;
      height:100%;
      position: absolute;
      top:0;left:0;
    }
    .thired-button{
      width:2.5rem;
      position: absolute;
      top:7.2rem;left:-3rem;right:0;bottom:0;
      margin:auto;
    }
    .thired-lucky-draw{
      width:2.5rem;
      position: absolute;
      top:7.2rem;left:3rem;right:0;bottom:0;
      margin:auto;
    }
    .instruction {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      position: fixed;
      left: 0;
      bottom: 0;
      color: #fff;
      font-size: 0.3rem;
      div {
        width: 100%;
        height: 0.8rem;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(#000000, transparent);
        opacity: 0.2;
      }
    }
    .prompt-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index:10;
      .back {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: black;
        opacity: 0.5;
        z-index: 1;
      }
      .backdrop {
        width: 70%;
        height: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        animation:mymove 1s 1;
        -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
        .backdrop-img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .prompting {
          width: 100%;
          text-align: center;
          color: #fff;
          text-shadow: 0px 0px 10px blue;
          font-size: 0.5rem;
          padding-top: 0.5rem;
        }
        .prizes {
          width: 100%;
          text-align: center;
          color: #fff;
          text-shadow: 0px 0px 10px blue;
          font-size: 0.6rem;
          position: absolute;
          top: 2rem;
          left: 0;
          padding:0.2rem;
        }
        .alert-button {
          width: 50%;
          position: absolute;
          top: 4.7rem;
          left: 0;
          right: 0;
          margin: auto;
        }
      }
    }
    .progress-box{
      width:7rem;
      height:0.4rem;
      position: absolute;
      top:10rem;left:0;right:0;bottom:0;
      margin:auto;
      .progress-bar-end{
        width:6.9rem;
        height:0.4rem;
        position: absolute;
        top:0;left:0;
      }
      .progress-bar-left{
        width:2.3rem;
        height:0.4rem;
        position: absolute;
        top:0;left:0rem;
      }
      .progress-bar-center{
        width:2.3rem;
        height:0.4rem;
        position: absolute;
        top:0;left:2.3rem;
      }
      .progress-bar-right{
        width:2.3rem;
        height:0.4rem;
        position: absolute;
        top:0;left:4.6rem;
      }
    }
  }
</style>
